<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">添加投票</block>
		</cu-custom>
		<view class="cu-card shadow">
			<view class="cu-item">

				<form>
					<view class="cu-form-group solid-bottom">
						<view class="flex align-center" style="width: 100%;">
							<view class="title">主题 :</view>
							<input v-model="title" style="font-size: 28upx;width: 100%;" placeholder="简单概要描述投票目标"
								maxlength="25"></input>
						</view>
					</view>
					<view v-for="(item,index) in voteItemList" :key="index">
						<view class="cu-form-group solid-bottom">
							<view class="flex align-center" style="width: 100%;">
								<view class="title">{{item.label}}{{map[index+1]}} :</view>
								<input v-model="item.value" style="font-size: 28upx;width: 100%;" placeholder="请输入内容, 限25字"
									maxlength="25"></input>
							</view>
							<view v-if="index<=1">
								<view class="action" @tap="deleteItem(index)">
									<text v-if="voteItemList.length>2" class="cuIcon-delete"></text>
								</view>
							</view>
							<view v-else>
								<view class="action" @tap="deleteItem(index)">
									<text v-if="index>1" class="cuIcon-delete"></text>
								</view>
							</view>
						</view>
					</view>
					<view @tap="addItem" v-if="voteItemList.length<9" class="action cu-form-group">
						<view class="action">
							<text class="cuIcon-add padding-right-xs"></text>
							<text class="text-df">添加选项</text>
						</view>
					</view>
				</form>
			</view>
		</view>
		<view class="action flex justify-around align-center padding-top" style="width: 100%;">
			<button @tap="clearVoteAction" class="cu-btn round bg-grey" style="width: 40%;">清空投票</button>
			<button @tap="commitAction" :class="'cu-btn round '+themeColor" style="width: 40%;">确定添加</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				themeColor:this.ThemeColor,
				map: {
					1: '一',
					2: '二',
					3: '三',
					4: '四',
					5: '五',
					6: '六',
					7: '七',
					8: '八',
					9: '九',
				},
				title:'',
				voteItemList: [{
						label: '选项',
						value: '',
					},
					{
						label: '选项',
						value: '',
					}
				],
			}
		},
		onLoad(options) {
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			let that = this
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				console.log(data)
				that.voteItemList = data.vote.voteItemList
				that.title = data.vote.title
			})
		},
		methods: {
			clearVoteAction() 
			{
				this.voteItemList = [{
						label: '选项',
						value: '',
					},
					{
						label: '选项',
						value: '',
					}
				]
				this.title = ''
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('commitEvent', {
					vote:{}
				});
			},
			addItem() {
				this.voteItemList.push({
					label: '选项',
					value: '',
				})
			},
			deleteItem(index) {
				this.voteItemList.splice(index, 1)
			},
			commitAction() {
				let isVoteListEmpty = true
				for(let i = 0;i<this.voteItemList.length;i++){
					let item = this.voteItemList[i]
					if(item.value.length > 0) {
						isVoteListEmpty = false
						break
					}
				}
				if(!isVoteListEmpty) {
					const eventChannel = this.getOpenerEventChannel()
					eventChannel.emit('commitEvent', {
						vote:{
							voteItemList: this.voteItemList,
							title:this.title
						}
					});
				}
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>

</style>
